<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gqgy="http://www.thymeleaf.org/extras/gqgl">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{post.info}"></title>
    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;


        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-200;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-300; /* -32 顶部主菜s单高度，   -90 查询条件高度*/
        }

        $(function () {
            resizePageSize();
            var _columnWidth = _gridWidth/5;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight-150,
                url : /*[[@{queryPostInfoListByOrgan}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : /*[[#{duty.id}]]*/"",name : 'dutyId',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{duty.name}]]*/"",name : 'dutyName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{duty.organ.id}]]*/"",name : 'organUuid',width : _columnWidth, sortable : true,align : 'center',hide: true},
                    {display : /*[[#{duty.organ.name}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{duty.role.id}]]*/"",name : 'roleUuid',width : _columnWidth, sortable : true,align : 'center',hide: true},
                    {display : /*[[#{duty.role.name}]]*/"",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'dutyId',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                            var htmltContents = '<a href="#" style="color: #00b1ef" class="navbar-btn" onclick="postDetail(\'' + v + '\')">' +
                                '<span> '
                                + /*[[#{post.btn.detail}]]*/''
                                +'</span> </a> ';
                            return htmltContents;
                        }}

                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true
            });
            $("#add-post-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{post.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {

                            var flag = $("#add-post-form-id input.form-control").verification({});
                            if(!flag){
                                return;
                            }
                            $("#add-post-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            $("body").css("height",$(document).height() + "px");
            loadLeftTree();

            query();

            var dialogWidthAll = $(document).width();
            var dialogHeightAll = $(document).height();
            $("#post-detail-dialog-id").dialog({
                width:dialogWidthAll,
                height:dialogHeightAll,
                autoOpen : false,
                modal : true,
                resizable : false,
                title: /*[[#{post.page.detail}]]*/''
            });

            $("#add-post-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{post.add}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {

                            var flag = $("#add-post-form-id input.form-control").verification({});
                            if(!flag){
                                return;
                            }
                            $("#add-post-form-id").submit();
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
            $("#add-btn-id").click(function (event) {
                event.stopPropagation()
                $("#add-post-dialog-id").dialog('open')
            })
            $("#add-post-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    $("#add-post-dialog-id").dialog('close');
                    query()
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            });
            // huo
            $("#allocate-dep-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{user.dep.allocate}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {


                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            $("#allocate-dep-id").click(function (event) {
                event.stopPropagation()
                // $("#allocate-auth-dialog-id").dialog('open')
                allocateDep();
            })

        });//ready

        var leftSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback:{
                onClick:onClickNode
            }
        };

        function loadLeftTree() {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{queryLeftOrganTree}]]*/'',
                data: [],
                success: function (data) {
                    $.fn.zTree.init($("#left-tree-id"), leftSetting, data);
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        function onClickNode(event, treeId, treeNode) {
            var organUuid = treeNode.id;
            console.info("id:"+organUuid);
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"organUuid",value:organUuid}
                ]
            }).flexReload();
        }
        function query() {

            $("#flexigrid-id").flexOptions({

            }).flexReload();

        }

        function postDetail(dutyId) {
            var url = /*[[${#request.getContextPath()}]]*/"";
            url +="/post/postPageDetail?dutyId=" + dutyId;
            // location.href = url;
            $("#post-detail-dialog-id").dialog('open');
            $("#post-detail-iframe-id").attr("src",url);

        }
    </script>
    <style>
        .form-group{
            margin: 0 10px;
        }
         body{
             background-color: #E6E6FA
         }
    </style>
</head>
<body style="display: flex;flex-direction: row">
<div style="flex-basis: 200px;background-color: #99bbe8">
    <ul id="left-tree-id"  class="ztree" >

    </ul>
</div>
<div style="flex-grow: 1;display: flex;flex-direction: column;">

    <article>
        <nav style="display: flex;flex-direction: row;margin-left: 10px;align-items: center">
            <a id="add-btn-id" href="#" class="navbar-btn" style="margin-left: 10px">
                <i class="glyphicon glyphicon-plus"></i>
                <span th:text="#{common.add}"></span>
            </a>
        </nav>
        <table id="flexigrid-id"></table>

    </article>
    <article style="flex-grow: 1;background-color: darkgray">
    </article>
</div>

<div id="post-detail-dialog-id" style="display: none">
    <iframe  id="post-detail-iframe-id" style="width: 100%;height: 100%;border: 0"></iframe>
</div>
<div id="add-post-dialog-id" style="display: none">
    <form id="add-post-form-id" th:action="@{addPostInfo}" method="post">
        <div class="form-group">
            <span th:text="#{duty.id}"></span>
            <input class="form-control" id="add-post-id-id" type="text" name="dutyName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{duty.name}"></span>
            <input class="form-control" id="add-post-name-id" type="text" name="dutyName" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{duty.remark}"></span>
            <input class="form-control" id="add-post-remark-id" type="text" name="remarks" reg="^.{1,20}$">
        </div>
        <div class="form-group">
            <span th:text="#{duty.role.name}"></span>
            <select id="add-role-remark-id" class="form-control" gqgy:dataSelect="${session.roleList}" readonly="true"></select>
        </div>
        <div class="form-group">
            <span th:text="#{duty.role.name}"></span>
            <select id="add-organ-remark-id" class="form-control" gqgy:dataSelect="${session.organList}" readonly="true"></select>
        </div>
    </form>

</div>

        <!--    huo-->
<div id="update-organ-dialog-id" style="display: none">
    <form id="update-organ-form-id" th:action="@{updateMenuInfo}" method="post">
                <div class="form-group">
                    <span th:text="#{menu.add.id}"></span>
                    <input class="form-control" id="update-menu-id" type="text" name="menuId">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.name}"></span>
                    <input class="form-control" id="update-menu-name-id" type="text" name="menuName">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.parent.id}"></span>
                    <input class="form-control" id="update-menu-parent-id" type="text" name="parentId">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.type}"></span>
                    <select id="update-menu-type-id" class="form-control" gqgy:dicselect="menu.type" name="menuType"></select>
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.type}"></span>
                    <select id="update-menu-level-id" class="form-control" gqgy:dicselect="menu.level" name="menuLevel"></select>
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.url}"></span>
                    <input class="form-control" id="update-menu-url-id" type="text" name="menuUrl">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.privilege.code}"></span>
                    <input class="form-control" id="update-menu-privilege-code-id" type="text" name="privilegeCode">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.icon}"></span>
                    <input class="form-control" id="update-menu-icon-id" type="text" name="menuIcon">
                </div>
                <div class="form-group">
                    <span th:text="#{menu.add.seq}"></span>
                    <input class="form-control" id="update-menu-seq-id" type="text" name="menuSeq">

                    <!--huo-->
                <delete id="deletePostById">
                    delete from pt_duty
                    where DUTYID in (
                    <foreach collection="dutyIds" item="dutyId" separator=",">
                        #{dutyId}
                    </foreach>
                    )
                </delete>
                    <!--huo-->
                </div>
            </form>
        </div>

</div>

</body>
</html>